<template>
    <el-menu
        class="menu"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        :close-on-click-outside="true"
        :popper-offset="4"
    >
        <el-menu-item index="0">
            <img style="width: 50px" src="/logo.png" />
            <span style="font-size: 20px; margin: 20px">Postgraduate</span>
        </el-menu-item>

        <div class="flex-grow">
            <el-sub-menu index="1">
                <template #title>
                    <img
                        src="/icons/politics.png"
                        style="width: 40px; height: 40px; margin-right: 10px"
                    />
                    <text>政治</text>
                </template>
                <el-menu-item index="1.1">知识点</el-menu-item>
                <el-menu-item index="1.2">错题本</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
                <template #title>
                    <img
                        src="/icons/English.png"
                        style="width: 30px; height: 30px; margin-right: 10px"
                    />
                    <text>英语</text>
                </template>
                <el-menu-item index="2.1">知识点</el-menu-item>
                <el-menu-item index="2.2">错题本</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
                <template #title>
                    <img
                        src="/icons/math.png"
                        style="width: 30px; height: 30px; margin-right: 10px"
                    />
                    <text>数学</text>
                </template>
                <el-menu-item index="3.1">知识点</el-menu-item>
                <el-menu-item index="3.2">错题本</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
                <template #title>
                    <img
                        src="/icons/408.png"
                        style="width: 30px; height: 30px; margin-right: 10px"
                    />
                    <text>408</text>
                </template>
                <el-menu-item index="4.1">知识点</el-menu-item>
                <el-menu-item index="4.2">错题本</el-menu-item>
            </el-sub-menu>
        </div>

        <div class="upload" @click="dialogVisible = true" v-show="isLogin">
            <img class="uploadImage" src="/icons/upload.png" />
            <text>上传新笔记</text>
        </div>
        <!-- 消息中心 -->
        <div class="messageCenter" @click="jump('/messageCenter')" v-show="isLogin">
            <img class="messageCenterImage" src="/icons/message.png" />
            <text>消息中心</text>
        </div>

        <!-- 上传笔记弹出层 -->

        <el-dialog v-model="dialogVisible" draggable class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">上传新笔记啦！</span>
            </div>

            <div class="uploadContent">
                <el-form class="form">
                    <el-form-item label="标题:">
                        <el-input
                            v-model="form.title"
                            placeholder="请输入标题"
                            style="width: 160px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="描述:">
                        <el-input
                            v-model="form.description"
                            type="textarea"
                            placeholder="请简单描述您的笔记吧"
                        ></el-input>
                    </el-form-item>
                    <!-- 接收组件传递过来的文件，同时将其绑定给表单的fileList属性 -->
                    <Upload v-model:fileList="form.fileList" />
                </el-form>

                <div class="copyWriting">
                    <i>{{ lizhi }}</i>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadForm()"
                        >上传</el-button
                    >
                </div>
            </template>
        </el-dialog>

        <div class="headerRightNotLogin" v-if="!isLogin">
            <div class="register">
                <el-button type="primary" @click="jump('/register')"
                    >SIGN UP</el-button
                >
            </div>

            <div class="login">
                <el-button type="success" @click="jump('/login')"
                    >LOGIN IN</el-button
                >
            </div>
        </div>

        <!-- 如果用户登录 -->
        <div class="headerRightLogin" v-else>
            <img
                :src="`${BaseUrl}${$store.state.userInfo.avatar}`"
                class="avatar"
            />
            <el-dropdown class="dropdown" trigger="click">
                <!-- <span class="name">{{ userInfo.userinfo.username }}</span> -->
                <span class="name">{{ $store.state.userInfo.nickname }}</span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="jump('/center')"
                            >个人中心</el-dropdown-item
                        >
                        <el-dropdown-item @click="logout"
                            >退出登录</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-menu>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineProps, inject, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { copyWritingLz } from "../../server/otherApi/copyWriting";
import { BaseUrl, uploadFile } from "../../server/userApi/index";
import router from "../../src/router";
import Upload from "./upload/FileUpload.vue";

const store = useStore();
const dialogVisible = ref(false);
const lizhi = ref(null);

// 获取父组件传递过来的isLogin
const props = defineProps({
    isLogin: Boolean,
});

//  存储表单提交的内容
const form = reactive({
    title: "",
    description: "",
    fileList: [],
});

// 上传
const uploadForm = async () => {
    // 判断用户

    // 创建formData对象
    const params = new FormData();
    // 添加用户id,将用户id转为整型

    params.append("userId", store.state.userInfo.id);
    // 添加文本字段
    params.append("title", form.title);
    params.append("description", form.description);

    // 遍历文件列表
    for (let i = 0; i < form.fileList.length; i++) {
        params.append("fileList", form.fileList[i].raw);
    }

    // 请求接口
    console.log(params);
    const res = await uploadFile(params);
    console.log(res);
    if (res.code === 1265505) {
        ElMessage.success(res.message);
    }
    dialogVisible.value = false;
};

onMounted(async () => {
    const result = await copyWritingLz();
    console.log(result);
    lizhi.value = result;
});
// 选择菜单
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);

    router.push("/knowledge");
};

// 编写跳转函数
function jump(path) {
    router.push(path);
}

const forceRerender = inject("forceRerender", () => {});
const logout = async () => {
    // store.commit('clearUserInfo');
    // 还需要添加token进行加密
    // localStorage.removeItem('userInfo');
    // await store.dispatch('logout');
    // 退出登录后刷新dom

    // await nextTick();

    // 存在问题  退出登录
    // router.replace('/');
    // nextTick(() => {
    //     window.location.reload();  // 性能消耗很大
    // });
    try {
        await store.dispatch("logout");
        forceRerender(); // 强制重新渲染
        ElMessage.success("退出登录成功");
        router.push("/");
    } catch (error) {
        console.error("退出登录失败:", error);
        ElMessage.error("退出登录失败，请重试");
    }
};
</script>

<style lang="scss" scoped>
.menu {
    height: 8vh;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .flex-grow {
        width: 600px;
        display: flex;
        justify-content: space-between;
    }

    .upload,
    .messageCenter {
        // width: 126px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        text {
            font-size: 12px;
            color: rgb(70, 70, 71);
        }

        .uploadImage,
        .messageCenterImage {
            width: 30px;
            height: 30px;
        }
        &:hover {
            transform: scale(1.1);
        }
    }

    // 弹出层
    .dialog {
        width: 800px;

        .dialog-header {
            margin-bottom: 12px;

            .dialog-title {
                width: 100%;
                margin-left: 35%;
                font-size: 28px;
                font-weight: bold;
            }
        }

        .uploadContent {
            display: flex;
            flex-direction: column;
        }

        .copyWriting {
            margin-top: 20px;
        }
    }

    .headerRightNotLogin {
        display: flex;

        .register {
            padding: 12px;
        }

        .login {
            padding: 12px;
        }
    }

    .headerRightLogin {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        margin-right: 10px;

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .dropdown {
            padding: 12px;
            cursor: pointer;
            border: none;

            :hover {
                color: rgb(82, 168, 248);
                list-style: none;
            }
        }
    }
}
</style>
